<template>
    <div class="home" :class="{'un-animation':un_animation}">
        <section class="header-section">
            <div class="header-section-guide">
                <div class="header-section-guide-describe">
                    <hgroup>
                        <h2>
                            Design and Sell Your <br /> Branded Clothing
                        </h2>
                        <p>Where creativity meets quality.</p>
                    </hgroup>
                    <button type="primary" class="home-btn" @click="jump('/product')">
                        Start now <i class="iconfont icon-you"></i>
                    </button>
                    <ul>
                        <li>
                            <p>No Upfront Cost</p>
                            <p>Maximized Design Freedom</p>
                        </li>
                        <li>
                            <p>Fast Fulfillment</p>
                            <p>Premium Quality Guaranteed</p>
                        </li>
                    </ul>
                </div>
                <figure>
                    <!-- header-section-design1 -->
                    <img src="https://img.podpartner.com/static/images-20230202/header-section-root.png" alt="" />
                    <div class="header-section-design">
                        <figure></figure>
                    </div>
                </figure>
            </div>
        </section>
        <section class="clothing-style">
            <div class="clothing-style-content">
                <section class="quality-garments" :class="{animation:garmentsAnimation}">
                    <div class="quality-garments-content">
                        <figure class="quality-garments-content-start">
                            <img src="https://img.podpartner.com/static/images-202305/home-garments-start1.jpg" alt="">
                            <img src="https://img.podpartner.com/static/images-202305/home-garments-start2.jpg" alt="">
                            <img src="https://img.podpartner.com/static/images-202305/home-garments-start3.jpg" alt="">
                        </figure>
                        <figure class="quality-garments-content-end">
                            <img src="https://img.podpartner.com/static/images-202305/home-garments-str.png" alt="">
                        </figure>
                    </div>
                </section>
                <div class="clothing-style-content-basics">
                    <h3>
                        A Sustainable Clothing Brand<br /> Needs<span> High-quality Basics</span>
                    </h3>
                    <p>We sweat the details. Each garment is 100% premium<br /> cotton fabric and finely tailored. Our high-quality basics<br /> deliver value to your customers and leave a positive <br /> lasting impression with no fluff.</p>
                    <figure>
                        <img src="https://img.podpartner.com/static/images-202305/clothing-style-1.png" alt="">
                        <img src="https://img.podpartner.com/static/images-202305/clothing-style-2.png" alt="">
                        <img src="https://img.podpartner.com/static/images-202305/clothing-style-3.png" alt="">
                    </figure>
                </div>
                <div class="clothing-style-content-trendy">
                    <h3>
                        Spice up Your Catalog with<br /> <span> Trendy Silhouettes</span>
                    </h3>
                    <p>Staying on top of trends is what we pursue. New aesthetics<br /> and functions are continuously purveyed, helping you build a<br /> captivating portfolio that engages your fashion-forward<br /> audience and increases brand awareness.</p>
                    <figure>
                        <img src="https://img.podpartner.com/static/images-202305/clothing-style-4.png" alt="">
                        <img src="https://img.podpartner.com/static/images-202305/clothing-style-5.png" alt="">
                        <img src="https://img.podpartner.com/static/images-202305/clothing-style-6.png" alt="">
                    </figure>
                </div>
            </div>
        </section>
        <section class="clothing-vision">
            <h3><span>All our clothing is intended to <br /> showcase your design vision.</span></h3>
            <ul>
                <li @click="$router.push('/product/detail?id=110U005')">
                    <figure>
                        <img src="https://img.podpartner.com/static/images-202305/clothing-style-1.png" alt="">
                    </figure>
                    <h4>
                        <span>190GSM Unisex Loose T-shirt</span>
                        <!-- <span>From USD 10.31</span> -->
                        <CommonCurrencyRate :price="1031" type="custom|unit|price" :other="{custom:'From'}" />
                    </h4>
                </li>
                <li @click="$router.push('/product/detail?id=140U001')">
                    <figure>
                        <img src="https://img.podpartner.com/static/images-202305/clothing-style-2.png" alt="">
                    </figure>
                    <h4>
                        <span>370GSM Unisex Heavyweight Oversized Sweatshirt</span>
                        <!-- <span>From USD 15.98</span> -->
                        <CommonCurrencyRate :price="1598" type="custom|unit|price" :other="{custom:'From'}" />
                    </h4>
                </li>
                <li @click="$router.push('/product/detail?id=130U001')">
                    <figure>
                        <img src="https://img.podpartner.com/static/images-202305/clothing-style-3.png" alt="">
                    </figure>
                    <h4>
                        <span>380GSM Unisex Fleece-lined Hoodie</span>
                        <!-- <span>From USD 24.96</span> -->
                        <CommonCurrencyRate :price="2496" type="custom|unit|price" :other="{custom:'From'}" />
                    </h4>
                </li>
                <li @click="$router.push('/product/detail?id=110U017')">
                    <figure class="clothing-vision-li-trans-figure">
                        <img src="https://img.podpartner.com/static/images-202305/clothing-style-4.png" alt="">
                        <figure class="clothing-vision-li-media">
                            <img src="https://img.podpartner.com/static/images-202305/clothing-style-mask-1.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/clothing-style-mask-2.png" alt="">
                            <img src="https://img.podpartner.com/static/images-202305/clothing-style-mask-3.png" alt="">
                            <img src="https://img.podpartner.com/static/images-202305/clothing-style-mask-1.png" alt="">
                            <img src="https://img.podpartner.com/static/images-202305/clothing-style-mask-4.png" alt="">
                            <img src="https://img.podpartner.com/static/images-202305/clothing-style-4.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/clothing-style-mask-2-b.png" alt="">
                        </figure>
                    </figure>
                    <h4>
                        <span>285GSM Unisex Oversized Snow Wash T-shirt</span>
                        <!-- <span>From USD 16.21</span> -->
                        <CommonCurrencyRate :price="1671" type="custom|unit|price" :other="{custom:'From'}" />
                    </h4>
                    <cite>
                        <div class="clothing-vision-li-print">
                            <p v-for="item in 18" :key="item">
                                <cite />
                            </p>
                        </div>
                    </cite>
                </li>
                <li @click="$router.push('/product/detail?id=120U006')">
                    <figure>
                        <img src="https://img.podpartner.com/static/images-202305/clothing-style-5.png" alt="">
                    </figure>
                    <h4>
                        <span>260GSM Unisex Oversized Sun Faded Long Sleeve Top</span>
                        <!-- <span>From USD 14.80</span> -->
                        <CommonCurrencyRate :price="1823" type="custom|unit|price" :other="{custom:'From'}" />
                    </h4>
                </li>
                <li @click="$router.push('/product/detail?id=130U008')">
                    <figure>
                        <img src="https://img.podpartner.com/static/images-202305/clothing-style-6.png" alt="">
                    </figure>
                    <h4>
                        <span>400GSM Unisex Super Heavyweight Sun Faded Hoodie</span>
                        <!-- <span>From USD 21.89</span> -->
                        <CommonCurrencyRate :price="3127" type="custom|unit|price" :other="{custom:'From'}" />
                    </h4>
                </li>
            </ul>
            <div class="clothing-vision-design">
                <dl>
                    <dt><span><em>Time to unlock<br /> your creativity!</em></span></dt>
                    <dd>
                        <h3>Be it a regular<br>placement</h3>
                        <p>Drop and preview your design in our easy-to-use Design Creator. <br /> A single print area can measure up <br /> to <strong><em>16" x 21"</em></strong>, allowing more details and a greater visual impact.</p>
                    </dd>
                    <dd>
                        <h3>Or a cool and <br>fun layout</h3>
                        <p>One of our best features is the vast amount of <br /> design freedom and the delightful, creative <br /> experience you can enjoy. With a maximum of<br /> <strong> <em>18 print areas</em> </strong>per garment, you'll be able to experiment with all your wild ideas and make your clothes shine! </p>
                        <button @click="jump('/designer?pid=110U017')">Start now</button>
                    </dd>
                </dl>
            </div>
        </section>
        <div class="clothing-vision-empty"></div>
        <section class="technology">
            <dl>
                <dt>
                    We will turn your creative thoughts <br /> into satisfying reality.

                </dt>
                <dd>
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20230202/home-technology-1.png" alt="">
                    </figure>
                    <p>• Our high-performance Brother GTX Pro-B DTG printing machine will perfectly bring your design to life with its exceptional print quality and eco-friendly water-based ink.</p>
                </dd>
                <dd>
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20230202/home-technology-2.png" alt="">
                    </figure>
                    <p>• Thanks to our efficient in-house production and years of industry experience, 98% of the orders can be fulfilled within 48 hours.</p>
                </dd>
                <dd>
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20230202/home-technology-3.png" alt="">
                    </figure>
                    <p>• We follow stringent quality control standards to ensure that all end products achieve excellent customer satisfaction ratings. </p>
                </dd>
            </dl>
        </section>
        <section class="sales">
            <dl>
                <dt>
                    Publish your clothing, make<br /> sales,
                    <strong>and let us take care</strong><br />
                    <strong>of the rest.</strong>
                </dt>
                <dd>
                    <p>Our integrations with multiple platforms allow you to quickly publish your custom clothing to your online stores and sell to the world with minimum effort. Leave all the hassle to us so you can focus on growing your business.<br />
                        <nuxt-link to="/document/how-work">Learn about how it works</nuxt-link>
                    </p>
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20230202/home-sales-bg.png" alt="">
                        <img src="https://img.podpartner.com/static/images-20230202/home-sales.png" alt="">
                    </figure>
                </dd>
            </dl>
        </section>
        <section class="sales-empty" />
        <section class="advantage">
            <figure>
                <img src="https://img.podpartner.com/static/images-20230202/home-advantage-1.png" alt="">
                <img src="https://img.podpartner.com/static/images-20230202/home-advantage-2.png" alt="">
                <img src="https://img.podpartner.com/static/images-20230202/home-advantage-3.png" alt="">
            </figure>
            <div class="advantage-content">
                <dl>
                    <dd><span>•</span>No Order Minimums</dd>
                    <dd><span>•</span>No Sale, No Charge</dd>
                    <dd><span>•</span>No Unsold Stock</dd>
                    <dd><span>•</span>No Quality Concerns</dd>
                    <dt>Only Creativity, Satisfaction, and Profits!</dt>
                </dl>
                <button type="primary" @click="$router.push('/user')">Get started</button>
                <figure class="advantage-content-bg">
                    <p></p>
                    <p></p>
                    <p></p>
                </figure>
            </div>
        </section>
    </div>
</template>
<script>
import { HOME } from "@/utils/SeoConfig";
export default {
    name: "Home",
    head ({ $store }) {
        return {
            title: HOME.title,
            meta: [
                { name: "keywords", content: HOME.keywords },
                { name: "description", content: HOME.description },
            ],
        };
    },
    data () {
        return {
            garmentsAnimation: false,
            originality: false,
            works: false,
            comment: false,
            screenHeight: null,
            domList: null,
            fuc_list: [
                this.doSection1
            ],
            un_animation: false,
        };
    },
    methods: {
        doSection1 (scroll, height) {
            let { section1, home } = this.domList;
            let rate1 = this.getRate(scroll, [1, 2]);
            let rate2 = this.getRate(scroll, [1.2, 2.2]);
            let rate3 = this.getRate(scroll, [1.4, 2.4]);
            let rate4 = this.getRate(scroll, [2, 3]);
            let rate5 = this.getRate(scroll, [2.2, 3.2]);
            let rate6 = this.getRate(scroll, [2.4, 3.4]);
            home.style.backgroundColor = `rgb(255,255,255)`
            section1.baseImg[0].style.animationIterationCount = rate1;
            section1.baseImg[1].style.animationIterationCount = rate2;
            section1.baseImg[2].style.animationIterationCount = rate3;
            section1.trendyImg[0].style.animationIterationCount = rate4;
            section1.trendyImg[1].style.animationIterationCount = rate5;
            section1.trendyImg[2].style.animationIterationCount = rate6;
        },
        doSection2 (scroll, height) {
            const { section2, home } = this.domList;
            let scrollRate = scroll / height;
            // let after = this.getRate(scroll, [3, 3.5]);
            let rate1 = this.getRate(scroll, [3.1, 3.5]);
            let rate2 = this.getRate(scroll, [3.5, 3.8]);
            let rate3 = this.getRate(scroll, [3.8, 4]);
            let rate4_1 = this.getRate(scroll, [4, 4.4]);
            let rate4_2 = this.getRate(scroll, [4.8, 5]);
            let rate5 = this.getRate(scroll, [5, 5.2]);
            let rate6 = this.getRate(scroll, [5.2, 6.2]);
            let rate7 = this.getRate(scroll, [6, 6.2]);
            let rate8 = this.getRate(scroll, [6.2, 7.2]);
            let border_rate = this.getRate(scroll, [6.4, 7]);
            let rate9 = this.getRate(scroll, [7.2, 8.2]);
            let media3_rate1 = this.getRate(scroll, [8.2, 8.8]);
            let media3_rate2 = this.getRate(scroll, [8.8, 9.4]);
            let media3_rate3 = this.getRate(scroll, [9.4, 10]);
            let trans = this.getRate(scroll, [10, 11]);
            // 样式参数
            let zIndex = scrollRate > 3 ? 1 : -1; //section的层级
            // let color = 255 * after; // 背景色
            let pointerEvents = rate3 == 1 && rate5 == 0 ? 'auto' : 'none'; //是否可点击
            section2.ul.style.pointerEvents = pointerEvents;
            let mask1 = rate6 == 1 && rate9 <= 0.25 ? 1 : 0;
            // let mask2 = rate8 > 0.5 && rate9 <= 0.25 ? 1 : 0;
            let mask2 = rate8 > 0.5 && rate9 <= 0.25 ? 1 : 0;
            let border_mask = rate8 > 0.3 && rate9 <= 0.25 ? 1 : 0;
            let border_bottom_show = border_rate == 1 && rate9 <= 0.25 ? 1 : 0;
            let printClass = rate9 > 0.25 ? 'clothing-vision-design-print show' : 'clothing-vision-design-print';
            let media3_active1, media3_show1, media3_active2, media3_show2, media3_active3, media3_show3;
            let lastImg = rate6 == 1 ? 1 : 0;
            if (media3_rate1 > 0 && media3_rate1 < 1) {
                media3_active1 = 'active'; media3_show1 = 1
            } else {
                media3_active1 = ''; media3_show1 = 0
            }
            if (media3_rate2 > 0 && media3_rate2 < 1) {
                media3_active2 = 'active'; media3_show2 = 1
            } else {
                media3_active2 = ''; media3_show2 = 0
            }
            if (media3_rate3 > 0) {
                media3_active3 = 'active'; media3_show3 = 1
            } else {
                media3_active3 = ''; media3_show3 = 0
            }
            //设置
            section2.section.style.zIndex = zIndex;
            section2.title.style.animationIterationCount = rate1 * 0.5 + 0.5 * rate2;
            section2.ul.style.animationIterationCount = 0.5 * rate2;
            section2.ul.style.setProperty('--li-before-opacity', rate3 - rate5);
            section2.ul.style.setProperty('--li-animation-h4', rate4_1 - rate4_2 * 0.5);
            section2.ul.style.setProperty('--liAnimationCount', rate6);
            section2.figure.style.width = `${240 + 98 * rate6}px`
            section2.figure.style.height = `${240 + 98 * rate6}px`
            section2.print.className = printClass; //显示print
            section2.design.style.setProperty('--dlCount', rate6 * 0.34 + rate8 * 0.33 + rate9 * 0.33); //dl 滚动 0.5 0.75 1
            section2.ul.style.setProperty('--designOpacity', rate7);
            section2.maskImg[0].style.opacity = mask1;
            section2.maskImg[1].style.opacity = border_mask;
            section2.maskImg[1].style.width = `${428 - 236 * border_rate}px`;
            section2.maskImg[6].style.opacity = border_bottom_show;
            section2.printItem[4].className = media3_active1;
            section2.printItem[6].className = media3_active1;
            section2.printItem[1].className = media3_active2;
            section2.printItem[17].className = media3_active3;
            section2.maskImg[2].style.opacity = media3_show1;
            section2.maskImg[3].style.opacity = media3_show2;
            section2.maskImg[4].style.opacity = media3_show3;
            section2.maskImg[5].style.opacity = lastImg;
            section2.section.style.setProperty('--transCount', trans);
        },
        doSection3 (scroll, height) {
            const { section3 } = this.domList
            // let rate1 = this.getRate(scroll, [10, 11]);
            // let dl_class = rate1 > 0.8 ? 'show' : '';
            // section3.dl.className = dl_class;
            let rate1 = this.getRate(scroll, [10.5, 10.8]);
            let rate2 = this.getRate(scroll, [10.6, 10.9]);
            let rate3 = this.getRate(scroll, [10.7, 11]);
            section3.dd[0].style.opacity = rate1;
            section3.dd[1].style.opacity = rate2;
            section3.dd[2].style.opacity = rate3;


        },
        doSection4 (scroll, height) {
            const { home, section4 } = this.domList;
            let rate1 = this.getRate(scroll, [10.9, 9.95]);
            let rate3 = this.getRate(scroll, [11, 11.8]);
            let rate4 = this.getRate(scroll, [11.5, 12]);
            let end = this.getRate(scroll, [12, 13]);
            let color = (1 - rate1) * 255 + 255 * (end * (1 / 0.8))

            home.style.backgroundColor = `rgb(${color},${color},${color})`
            section4.section.style.setProperty('--salesImg1Count', rate3)
            section4.section.style.setProperty('--salesImg2Count', rate4)
        },
        doFuc (scroll, height) {
            if (this.domList == null || this.un_animation) {
                return
            }
            let height_arr = [1, 3, 10, 11, 12];
            let rate = scroll / height
            if (rate > 0.2 && !this.garmentsAnimation) {
                this.garmentsAnimation = true
            }
            this.doSection1(scroll, height)
            this.doSection2(scroll, height)
            this.doSection3(scroll, height)
            this.doSection4(scroll, height)
            // if (rate > height_arr[0] - 1 && rate < height_arr[1] + 1) {
            //     this.doSection1(scroll, height)
            // }
            // if (rate > height_arr[1] - 1 && rate < height_arr[2] + 1) {
            //     this.doSection2(scroll, height)
            // }
            // if (rate > height_arr[2] - 1 && rate < height_arr[3] + 1) {
            //     this.doSection3(scroll, height)
            // }
            // if (rate > height_arr[3] - 1 && rate < height_arr[4] + 1) {
            //     this.doSection4(scroll, height)
            // }
        },
        initFuc (scrollTop, height) {
            this.doSection1(scrollTop || 0, height)
            this.doSection2(scrollTop || 0, height)
            this.doSection3(scrollTop || 0, height)
            this.doSection4(scrollTop || 0, height)
            this.garmentsAnimation = false
        },
        onScroll (event, init) {
            let scrollTop =
                document.documentElement.scrollTop || document.body.scrollTop;
            if (init || scrollTop == 0) {
                this.initFuc(scrollTop, this.screenHeight)
            } else {
                this.doFuc(scrollTop, this.screenHeight)

            }
        },
        changeScreenSize (event) {
            let height = document.documentElement.clientHeight;
            let width = document.documentElement.clientWidth;

            this.screenHeight = height;
            if (height >= 740 && width >= 1200) {
                this.un_animation = false;
            } else {
                this.un_animation = true;
            }

            this.$nextTick(e => {

                Object.values(this.domList).map(obj => {
                    if (obj.setAttribute) {
                        obj.setAttribute('style', '')
                    } else {
                        Object.values(obj).map(elem => elem.setAttribute && elem.setAttribute('style', ''))
                    }
                })

                setTimeout(() => this.onScroll(event, true), 10);

            });
        },
        getDomList () {
            let home = document.documentElement.querySelector('.home');
            let section4 = (() => {
                let section = document.documentElement.querySelector('.sales');
                let img = section.querySelectorAll('img')
                return { section, img }
            })()
            let section3 = (() => {
                let section = document.documentElement.querySelector('.technology');
                let dl = section.querySelector('dl')
                let dd = dl.querySelectorAll('dd')
                let img = section.querySelectorAll('img')
                return { section, dl, dd, img }
            })()
            let section2 = (() => {
                let section = document.documentElement.querySelector('.clothing-vision');
                let title = section.querySelector('h3');
                let ul = section.querySelector('ul')
                let lis = ul.querySelectorAll('li')
                let design = section.querySelector('.clothing-vision-design')
                let print = ul.querySelector('.clothing-vision-li-print')
                let figure = ul.querySelector('.clothing-vision-li-trans-figure')
                let printItem = print.querySelectorAll('p')
                let media = ul.querySelector('.clothing-vision-li-media')
                let maskImg = media.querySelectorAll('img')
                return { section, title, ul, lis, design, print, maskImg, printItem, figure }
            })()
            let section1 = (() => {
                let section = document.documentElement.querySelector('.clothing-style');
                let basics = document.documentElement.querySelector('.clothing-style-content-basics');
                let trendy = document.documentElement.querySelector('.clothing-style-content-trendy');
                let baseImg = basics.querySelectorAll('img');
                let trendyImg = trendy.querySelectorAll('img');
                return { section, baseImg, trendyImg }
            })()
            this.domList = { home, section1, section2, section3, section4 }
        },
        getRate (scroll, arr) {
            let height = this.screenHeight;
            scroll ? scroll : 0;
            arr ? arr = [arr[0] * height, arr[1] * height] : [0, 0];
            let rate = scroll > arr[0] ? scroll <= arr[1] ? (scroll - arr[0]) / (arr[1] - arr[0]) : 1 : 0;
            return rate
        },
        jump (url) {
            this.$router.push(url);
        },

    },
    created () {
        if (process.client) {
            window.addEventListener("scroll", this.onScroll);
            window.addEventListener('resize', this.changeScreenSize);
        }
    },
    mounted () {
        this.getDomList()
        this.changeScreenSize();
        this.onScroll(event, true)
    },
    beforeDestroy () {
        window.removeEventListener("scroll", this.onScroll);
        window.removeEventListener('resize', this.changeScreenSize);
    },
};
</script>
<style lang="scss" scoped>
@keyframes show-item {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes hide-item {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
//动画
* {
    box-sizing: border-box;
    img {
        width: 100%;
        height: 100%;
    }
}
.quality-garments {
    --garments-img-opacity: 0;
    width: 100%;
    height: 100vh;
    min-height: 820px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    .quality-garments-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 1280px;
        height: 680px;
        background: #f2f1f2;
        border-radius: 28px;
        overflow: hidden;
        figure {
            position: absolute;
            inset: 0;
            background-color: #fafafa;
            img {
                position: absolute;
            }
        }
        .quality-garments-content-end {
            width: 100%;
            height: 100%;
            opacity: 0;
            background: rgba($color: #000000, $alpha: 0.3);
            z-index: 1;
            img {
                width: 220px;
                height: auto;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
        .quality-garments-content-start {
            img {
                width: 420px;
                height: auto;
                &:nth-child(1) {
                    top: 0;
                    left: 0;
                    transform: translateY(-100%);
                }
                &:nth-child(2) {
                    bottom: 0;
                    left: calc(50% - 210px);
                    transform: translateY(100%);
                }
                &:nth-child(3) {
                    top: 0;
                    right: 0;
                    transform: translateY(-100%);
                }
            }
        }
    }
    &.animation {
        @keyframes garments-start1 {
            0% {
                transform: translateY(-100%);
            }
            100% {
                transform: translateY(0);
            }
        }
        @keyframes garments-start2 {
            0% {
                transform: translateY(100%);
            }
            100% {
                transform: translateY(0);
            }
        }
        @keyframes garments-end {
            0% {
                width: 220px;
            }
            100% {
                width: 520px;
            }
        }
        .quality-garments-content {
            .quality-garments-content-end {
                animation: show-item ease-in-out 0.5s 1.5s forwards;
                & > img {
                    animation: garments-end ease-in-out 0.5s 1.5s forwards;
                }
            }
        }
        .quality-garments-content-start {
            img {
                &:nth-child(1),
                &:nth-child(3) {
                    animation: garments-start1 ease-in-out 1.5s forwards;
                }
                &:nth-child(2) {
                    animation: garments-start2 ease-in-out 1.5s forwards;
                }
            }
        }
    }
}
.advantage {
    padding: 180px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    // background: #fff;
    position: relative;
    & > figure {
        position: absolute;
        inset: 0;
        pointer-events: none;
        img {
            position: absolute;
            height: auto;
            &:nth-child(1) {
                left: 0;
                top: 254px;
                width: 24px;
            }
            &:nth-child(2) {
                right: 188px;
                top: 76px;
                width: 42px;
            }
            &:nth-child(3) {
                right: 0;
                top: 580px;
                width: 40px;
            }
        }
    }
    .advantage-content {
        width: 100%;
        max-width: 1200px;
        min-width: 894px;
        height: 362px;
        border-radius: 48px;
        background-color: #f0f0f0;
        background-image: url("https://img.podpartner.com/static/images-20230202/home-advantage-bg.png");
        background-repeat: no-repeat;
        background-size: 894px 362px;
        background-position: 50% 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        dl {
            font-family: Roboto-Bold, Roboto;
            width: 894px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 40px;
            dt {
                width: 100%;
                text-align: center;
                font-size: 36px;
                font-weight: bold;
                color: #000000;
                line-height: 32px;
                margin-top: 32px;
            }
            dd {
                font-size: 18px;
                font-weight: bold;
                color: #000;
                line-height: 26px;
                span {
                    display: inline-block;
                    color: #edb002;
                    margin-right: 8px;
                }
                margin-right: 40px;
                &:nth-last-child(2) {
                    margin-right: 0;
                }
            }
        }
        button {
            font-family: Roboto;
            width: 260px;
            height: 52px;
            // background: #ea4c89;
            border-radius: 8px;
            border: none;
            outline: none;
            font-size: 20px;
            font-weight: bold;
            color: #ffffff;
            line-height: 20px;
        }
        .advantage-content-bg {
            display: none;
        }
    }
}
.sales {
    --salesTransCount: 0;
    --salesImg1Count: 0;
    --salesImg2Count: 0;
    z-index: 1;
    height: 100vh;
    width: 100%;
    padding-top: 78px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    dl {
        width: 986px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        dt {
            font-family: Roboto-Bold, Roboto;
            width: 986px;
            font-size: 64px;
            font-weight: bold;
            color: #ffffff;
            line-height: 78px;
            strong {
                width: 580px;
                font-size: 64px;
                font-weight: bold;
                color: #fbbc06;
                line-height: 78px;
                background: linear-gradient(225deg, #edb002 0%, #e53bac 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }
        dd {
            width: 940px;
            flex: 1;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            p {
                font-family: Roboto;
                width: 468px;
                font-size: 24px;
                font-weight: 400;
                color: #d9d9d9;
                line-height: 36px;
                & > a {
                    color: #a0a0a0;
                    text-decoration: underline;
                    &:hover {
                        color: #ea4c89;
                    }
                }
            }
            figure {
                width: 400px;
                height: 400px;
                position: relative;
                img {
                    @keyframes sales-img1 {
                        0% {
                            width: 0;
                            height: 0;
                        }
                        100% {
                            width: 280px;
                            height: 280px;
                        }
                    }
                    @keyframes sales-img2 {
                        0% {
                            width: 0;
                            height: 0;
                        }
                        100% {
                            width: 320px;
                            height: 344px;
                        }
                    }
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    &:nth-child(1) {
                        width: 128px;
                        height: 128px;
                        animation: sales-img1 linear 0s forwards;
                        animation-iteration-count: var(--salesImg1Count);
                    }
                    &:nth-child(2) {
                        width: 0;
                        height: 0;
                        animation: sales-img2 linear 0s forwards;
                        animation-iteration-count: var(--salesImg2Count);
                    }
                }
            }
        }
    }
}
.technology {
    height: 100vh;
    min-height: 800px;
    background: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    dl {
        width: 1000px;
        height: 748px;
        display: flex;
        flex-direction: column;
        align-items: center;
        dt {
            font-family: Roboto-Bold, Roboto;
            font-size: 56px;
            font-weight: bold;
            color: #ffffff;
            line-height: 72px;
            text-align: center;
        }
        dd {
            opacity: 0;
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            margin-top: 32px;
            figure {
                width: 260px;
                height: 160px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            p {
                width: 686px;
                height: 108px;
                font-size: 24px;
                font-family: Roboto;
                color: #ffffff;
                line-height: 36px;
            }
            &:nth-child(2) {
                margin-top: 60px;
            }
        }
        &.show {
            dd {
                &:nth-child(2) {
                    animation: show-item 1s 0.2s forwards;
                }
                &:nth-child(3) {
                    animation: show-item 1s 0.4s forwards;
                }
                &:nth-child(4) {
                    animation: show-item 1s 0.6s forwards;
                }
            }
        }
    }
}
.clothing-vision {
    @keyframes vision-trans {
        0% {
            transform: translateY(0);
        }
        100% {
            transform: translateY(-100vh);
        }
    }
    --transCount: 0;
    width: 100vw !important;
    height: 100vh;
    padding-top: 78px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: -1;
    animation: vision-trans linear 0s forwards;
    animation-iteration-count: var(--transCount);
    > h3 {
        pointer-events: none;
        @keyframes vision-h3-scale {
            0% {
                opacity: 0;
                transform: scale(2);
            }
            50% {
                opacity: 1;
                transform: scale(--scale);
            }
            100% {
                opacity: 0;
                transform: scale(1);
            }
        }
        position: absolute;
        top: calc(50% - 45px);
        opacity: 0;
        animation: vision-h3-scale linear 0s forwards;
        animation-iteration-count: 0;
        overflow: hidden;
        transform: scale(0.99);

        span {
            display: block;
            background: linear-gradient(225deg, #edb002 0%, #e53bac 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transform: scale(1.0101);
            font-size: 64px;
            font-family: Roboto-Bold, Roboto;
            font-weight: bold;
            color: #000000;
            line-height: 82px;
            padding: 5px;
        }
    }
    > ul {
        z-index: 1;
        --liAnimationCount: 0;
        --li-animation-h4: 0;
        --li-before-opacity: 0;
        --designOpacity: 0;
        pointer-events: none;
        @keyframes vision-ul {
            0% {
                opacity: 0;
                transform: scale(2) translateX(0px);
            }
            50% {
                opacity: 1;
                transform: scale(1) translateX(0px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateX(-100vw);
            }
        }
        opacity: 0;
        width: 1200px;
        position: absolute;
        margin: -30px 0;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        animation: vision-ul linear 0s forwards;
        animation-iteration-count: 0;
        li {
            @keyframes vision-li-top {
                0% {
                    transform: translateY(0);
                }
                100% {
                    transform: translateY(-100vh);
                }
            }
            @keyframes vision-li-center {
                0% {
                    transform: translate(0, 0);
                }
                80% {
                    transform: translate(87px, -183px);
                }
                100% {
                    transform: translate(87px, -183px);
                }
            }
            @keyframes vision-li-img {
                0% {
                    width: 240px;
                    height: 240px;
                }
                100% {
                    width: 338px;
                    height: 338px;
                }
            }
            width: 33.3%;
            height: 343px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 30px 0;
            position: relative;
            & > figure {
                cursor: pointer;
                width: 240px;
                height: 240px;
                position: relative;
                img {
                    width: 100%;
                    height: 100%;
                }
                &:hover {
                    transition: 0.3s;
                    transform: scale(1.1);
                }
            }
            h4 {
                @keyframes vision-li-h4 {
                    0% {
                        opacity: 0;
                        height: 0;
                    }
                    50% {
                        opacity: 0;
                        height: 68px;
                    }
                    100% {
                        opacity: 1;
                        height: 68px;
                    }
                }
                z-index: 1;
                opacity: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 240px;
                height: 68px;
                font-size: 16px;
                font-family: Roboto-Medium, Roboto;
                font-weight: normal;
                color: #000000;
                line-height: 21px;
                margin-bottom: 8px;
                margin: -4px 0;
                animation: vision-li-h4 linear 0s forwards;
                animation-iteration-count: var(--li-animation-h4);
                span {
                    display: block;
                    margin: 4px 0;
                    text-align: center;
                }

                .currency-rate {
                    position: relative;
                    font-size: 14px;
                    display: block;
                    margin: 4px 0;
                    text-align: center;
                    &::before {
                        z-index: -1;
                        content: "";
                        display: block;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        width: 132px;
                        height: 28px;
                        background: #ffffff;
                        border-radius: 6px;
                    }
                }
            }

            & > cite {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, calc(-50% - 30px));
                pointer-events: none;
                opacity: var(--designOpacity);
                width: 440px;
                height: 440px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: transparent;
                // background-color: #f5f4f1;
                border-radius: 440px;

                & > div {
                    width: 440px;
                    height: 440px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    > p {
                        opacity: 0;
                        box-sizing: border-box;
                        position: absolute;
                        width: 56px;
                        height: 56px;
                        background-color: #ffffff;
                        box-shadow: 0 0 0 2px rgb(245, 217, 217);
                        border: solid 0px;
                        border-radius: 56px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        transform: rotate(0deg) translateY(-260px);
                        cite {
                            position: absolute;
                            width: 36px;
                            height: 36px;
                            background-image: url("https://img.podpartner.com/static/images-20230202/clothing-style-sprites.png");
                            background-size: 180px auto;
                            background-position: -36px 0px;
                        }
                        &:hover,
                        &.active {
                            transition: 0.3s;
                            box-shadow: 0 0 0 4px rgb(225, 150, 150);
                        }
                        &:nth-child(2) {
                            transform: rotate(20deg) translateY(-260px);
                            cite {
                                background-position: -72px 0px;
                                transform: rotate(-20deg);
                            }
                        }
                        &:nth-child(3) {
                            transform: rotate(40deg) translateY(-260px);
                            cite {
                                transform: rotate(-40deg);
                                background-position: 0.5px -36px;
                            }
                        }
                        &:nth-child(4) {
                            transform: rotate(60deg) translateY(-260px);
                            cite {
                                transform: rotate(-60deg);
                                background-position: -72px -36px;
                                // background-position: -36px -36px;
                            }
                        }
                        &:nth-child(5) {
                            transform: rotate(80deg) translateY(-260px);
                            cite {
                                transform: rotate(-80deg);
                                // background-position: -72px -36px;
                                background-position: -36px -36px;
                            }
                        }
                        &:nth-child(6) {
                            transform: rotate(100deg) translateY(-260px);
                            cite {
                                transform: rotate(-100deg);
                                background-position: -108px 0px;
                            }
                        }
                        &:nth-child(7) {
                            transform: rotate(120deg) translateY(-260px);
                            cite {
                                transform: rotate(-120deg);
                                background-position: -108px -36px;
                            }
                        }
                        &:nth-child(8) {
                            transform: rotate(140deg) translateY(-260px);
                            cite {
                                transform: rotate(-140deg);
                                background-position: 0px -108px;
                            }
                        }
                        &:nth-child(9) {
                            transform: rotate(160deg) translateY(-260px);
                            cite {
                                transform: rotate(-160deg);

                                background-position: -36px -72px;
                            }
                        }
                        &:nth-child(10) {
                            transform: rotate(180deg) translateY(-260px);
                            cite {
                                transform: rotate(-180deg);
                                background-position: -72px -72px;
                            }
                        }
                        &:nth-child(11) {
                            transform: rotate(200deg) translateY(-260px);
                            cite {
                                transform: rotate(-200deg);
                                background-position: -108px -72px;
                            }
                        }
                        &:nth-child(12) {
                            transform: rotate(220deg) translateY(-260px);
                            cite {
                                transform: rotate(-220deg);
                                background-position: -144px 0px;
                            }
                        }
                        &:nth-child(13) {
                            transform: rotate(240deg) translateY(-260px);
                            cite {
                                transform: rotate(-240deg);
                                background-position: -144px -36px;
                            }
                        }
                        &:nth-child(14) {
                            transform: rotate(260deg) translateY(-260px);
                            cite {
                                transform: rotate(-260deg);
                                background-position: -144px -72px;
                            }
                        }
                        &:nth-child(15) {
                            transform: rotate(280deg) translateY(-260px);
                            cite {
                                transform: rotate(-280deg);
                                background-position: 0px -108px;
                            }
                        }
                        &:nth-child(16) {
                            transform: rotate(300deg) translateY(-260px);
                            cite {
                                transform: rotate(-300deg);
                                background-position: 0px 0px;
                            }
                        }
                        &:nth-child(17) {
                            transform: rotate(320deg) translateY(-260px);
                            cite {
                                transform: rotate(-320deg);
                                background-position: -36px -108px;
                            }
                        }
                        &:nth-child(18) {
                            transform: rotate(340deg) translateY(-260px);
                            cite {
                                transform: rotate(-340deg);
                                background-position: -72px -108px;
                            }
                        }
                    }
                    &.show {
                        & > p {
                            animation: show-item 0.5s ease-in-out forwards;
                            &:nth-child(1) {
                                animation-delay: 0s;
                            }
                            &:nth-child(2) {
                                animation-delay: 0.01s;
                            }
                            &:nth-child(3) {
                                animation-delay: 0.03s;
                            }
                            &:nth-child(4) {
                                animation-delay: 0.05s;
                            }
                            &:nth-child(5) {
                                animation-delay: 0.07s;
                            }
                            &:nth-child(6) {
                                animation-delay: 0.1s;
                            }
                            &:nth-child(7) {
                                animation-delay: 0.13s;
                            }
                            &:nth-child(8) {
                                animation-delay: 0.16s;
                            }
                            &:nth-child(9) {
                                animation-delay: 0.2s;
                            }
                            &:nth-child(10) {
                                animation-delay: 0.24s;
                            }
                            &:nth-child(11) {
                                animation-delay: 0.28s;
                            }
                            &:nth-child(12) {
                                animation-delay: 0.32s;
                            }
                            &:nth-child(13) {
                                animation-delay: 0.36s;
                            }
                            &:nth-child(14) {
                                animation-delay: 0.4s;
                            }
                            &:nth-child(15) {
                                animation-delay: 0.44s;
                            }
                            &:nth-child(16) {
                                animation-delay: 0.5s;
                            }
                            &:nth-child(17) {
                                animation-delay: 0.56s;
                            }
                            &:nth-child(18) {
                                animation-delay: 0.62s;
                            }
                        }
                    }
                }
            }

            .clothing-vision-li-media {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                    opacity: 0;
                    z-index: 2;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    // mix-blend-mode: overlay;
                    transition: opacity 0.2s;
                    pointer-events: none;
                    &:nth-child(2) {
                        // width: 192px;
                        width: 428px;
                        height: auto;
                    }
                    &:nth-last-child(2) {
                        opacity: 1;
                        z-index: 1;
                    }
                    &:last-child {
                        transform: translateY(114px);
                        width: 68px;
                        height: auto;
                    }
                }
            }

            &:nth-child(4) {
                animation: vision-li-center linear 0s forwards;
                animation-iteration-count: var(--liAnimationCount);
                & > figure {
                    &::before {
                        content: "";
                        z-index: -1;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        pointer-events: none;
                        opacity: var(--designOpacity);
                        width: 440px;
                        height: 440px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        background-color: #f5f4f1;
                        border-radius: 50%;
                    }
                }
            }
            &:not(:nth-child(4)) {
                animation: vision-li-top linear 0s forwards;
                animation-iteration-count: var(--liAnimationCount);
            }
            &:nth-child(1) {
                &::before {
                    content: "";
                    opacity: var(--li-before-opacity);
                    display: block;
                    width: 360px;
                    height: 360px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: #deecf1;
                    border-radius: 50%;
                }
            }
            &:nth-child(2) {
                &::before {
                    content: "";
                    opacity: var(--li-before-opacity);
                    display: block;
                    width: 360px;
                    height: 360px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: #f8f1e9;
                    border-radius: 50%;
                }
            }
            &:nth-child(3) {
                &::before {
                    content: "";
                    opacity: var(--li-before-opacity);
                    display: block;
                    width: 360px;
                    height: 360px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: #dedef1;
                    border-radius: 50%;
                }
            }
            &:nth-child(4) {
                &::before {
                    content: "";
                    opacity: var(--li-before-opacity);
                    display: block;
                    width: 360px;
                    height: 360px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: #eff1de;
                    border-radius: 50%;
                }
            }
            &:nth-child(5) {
                &::before {
                    content: "";
                    opacity: var(--li-before-opacity);
                    display: block;
                    width: 360px;
                    height: 360px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: #deecf1;
                    border-radius: 50%;
                }
            }
            &:nth-child(6) {
                &::before {
                    content: "";
                    opacity: var(--li-before-opacity);
                    display: block;
                    width: 360px;
                    height: 360px;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    background: #f1e5de;
                    border-radius: 50%;
                }
            }
        }
    }
    .clothing-vision-design {
        --designOpacity: 0;
        --dlCount: 0;
        width: 1200px;
        min-width: 1200px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        padding: 0 16px;
        > dl {
            @keyframes design-media-dl {
                0% {
                    opacity: 0;
                    transform: translateY(100vh);
                }
                1% {
                    opacity: 1;
                    transform: translateY(100vh);
                }
                34% {
                    opacity: 1;
                    transform: translateY(0);
                }
                67% {
                    opacity: 1;
                    transform: translateY(-100vh);
                }
                100% {
                    opacity: 1;
                    transform: translateY(-200vh);
                }
            }
            animation: design-media-dl linear 0s var(--dlCount) forwards;
            transform: translateY(100vh);
            justify-self: flex-start;
            width: 548px;
            height: 100vh;
            & > * {
                height: 100vh;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            dt {
                span {
                    display: block;
                    position: relative;
                    overflow: hidden;
                    transform: scale(0.99);
                    margin-left: 5px;
                    margin-top: -5px;
                }
                em {
                    display: block;
                    padding: 5px;
                    font-size: 72px;
                    font-family: Roboto-Bold, Roboto;
                    font-weight: bold;
                    color: #000000;
                    line-height: 92px;
                    background: linear-gradient(
                        225deg,
                        #edb002 0%,
                        #e53bac 100%
                    );
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    transform: scale(1.0101);
                }
            }
            dd {
                h3 {
                    font-size: 72px;
                    font-family: Roboto-Bold, Roboto;
                    font-weight: bold;
                    color: #000000;
                    line-height: 78px;
                    margin-bottom: 14px;
                }
                p {
                    letter-spacing: -0.6px;
                    font-size: 24px;
                    font-family: Roboto;
                    font-weight: 400;
                    color: #000000;
                    line-height: 36px;
                    strong {
                        display: inline-block;
                        position: relative;
                        overflow: hidden;
                        vertical-align: top;
                        transform: scale(0.94);

                        em {
                            display: block;
                            padding: 5px 4px;
                            font-size: 24px;
                            font-family: Roboto-Bold, Roboto;
                            font-weight: bold;
                            color: #000000;
                            line-height: 26px;
                            background: linear-gradient(
                                270deg,
                                #edb002 0%,
                                #e53bac 100%
                            );
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            transform: scale(1.05);
                        }
                    }
                }
                button {
                    margin-top: 40px;
                    width: 178px;
                    height: 46px;
                    background: #000000;
                    border-radius: 24px;
                    font-size: 24px;
                    font-family: Roboto-Bold, Roboto;
                    font-weight: 400;
                    color: #ffffff;
                    line-height: 22px;
                    text-align: left;
                    padding: 0 20px;
                    position: relative;
                    &::before {
                        content: "";
                        display: block;
                        position: absolute;
                        right: 20px;
                        top: 50%;
                        transform: translateY(-1px) rotate(45deg);
                        transform-origin: right center;
                        width: 12px;
                        height: 3px;
                        border-radius: 2px;
                        background: #fff;
                    }
                    &::after {
                        content: "";
                        display: block;
                        position: absolute;
                        right: 20px;
                        top: 50%;
                        transform: translateY(-2px) rotate(-45deg);
                        transform-origin: right center;
                        width: 12px;
                        height: 3px;
                        border-radius: 2px;
                        background: #fff;
                    }
                    &:hover {
                        border-color: transparent;
                    }
                }
            }
        }
    }
}
.clothing-vision-empty {
    width: 1px;
    height: 700vh;
}
.clothing-style {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    .clothing-style-content {
        // width: 1000px;
        .clothing-style-content-title {
            opacity: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            box-sizing: border-box;
            h2 {
                font-size: 64px;
                font-weight: 900;
                line-height: 78px;
                text-align: center;
                color: #000000;
                background: linear-gradient(225deg, #edb002 0%, #e53bac 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
        }

        .clothing-style-content-basics,
        .clothing-style-content-trendy {
            height: 100vh;
            min-height: 720px;
            position: relative;
            h3 {
                font-size: 64px;
                font-family: Roboto-Black, Roboto;
                font-weight: 900;
                color: #000;
                line-height: 78px;
                margin-bottom: 40px;
                span {
                    color: #fbbc06;
                }
            }
            p {
                font-family: Roboto;
                font-size: 24px;
                font-weight: 400;
                color: #000;
                line-height: 36px;
            }
            figure {
                position: absolute;
                right: 130px;
                top: 280px;
                width: 220px;
                height: 220px;
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .clothing-style-content-basics {
            @keyframes clothing-img-basics {
                0% {
                    width: 312px;
                    height: 312px;
                    transform: translate(-468px, 468px);
                }
                25% {
                    width: 312px;
                    height: 312px;
                    transform: translate(-312px, 260px);
                }
                50% {
                    width: 312px;
                    height: 312px;
                    transform: translate(0, 0);
                }
                75% {
                    width: 220px;
                    height: 220px;
                    transform: translate(312px, -260px);
                }
                100% {
                    width: 220px;
                    height: 220px;
                    transform: translate(468px, -468px);
                }
            }
            & > figure {
                img {
                    position: absolute;
                    width: 220px;
                    height: 220px;
                    transform: translate(-468px, 468px);
                    animation: clothing-img-basics linear 0s forwards;
                    animation-iteration-count: 0;
                }
            }
        }
        .clothing-style-content-trendy {
            h3 {
                span {
                    color: #ea4c89;
                }
            }
            @keyframes clothing-img-trendy {
                0% {
                    width: 312px;
                    height: 312px;
                    transform: translate(468px, 468px);
                }
                25% {
                    width: 312px;
                    height: 312px;
                    transform: translate(312px, 260px);
                }
                50% {
                    width: 312px;
                    height: 312px;
                    transform: translate(0, 0);
                }
                75% {
                    width: 220px;
                    height: 220px;
                    transform: translate(-312px, -260px);
                }
                100% {
                    width: 220px;
                    height: 220px;
                    transform: translate(-468px, -468px);
                }
            }
            text-align: right;
            figure {
                left: 116px;
                top: 340px;
                img {
                    position: absolute;
                    width: 220px;
                    height: 220px;
                    transform: translate(468px, -468px);
                    animation: clothing-img-trendy linear 0s forwards;
                    animation-iteration-count: 0;
                }
            }
        }
    }
}
.header-section {
    box-sizing: border-box;
    position: relative;
    height: calc(100vh - 78px);
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    hgroup {
        margin-bottom: 60px;
    }
    h1 {
        width: 725px;
        height: 180px;
        font-size: 72px;
        font-weight: bold;
        color: #181818;
        line-height: 90px;
    }
    .header-section-guide {
        padding: 0 32px;
        width: 100%;
        min-width: 1200px;
        max-width: 1400px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        .header-section-guide-describe {
            margin-right: 210px;
            > hgroup {
                position: relative;
                height: 210px;
                h2 {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 760px;
                    font-size: 72px;
                    font-family: Roboto-Bold, Roboto;
                    font-weight: bold;
                    color: #181818;
                    line-height: 82px;
                }
                p {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 760px;
                    font-size: 22px;
                    font-weight: 400;
                    color: #555555;
                }
            }

            ul {
                margin-top: 88px;
                li {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: space-around;
                    p {
                        margin-bottom: 12px;
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        position: relative;
                        padding: 0 0 0 18px;
                        width: 260px;
                        height: 28px;
                        line-height: 28px;
                        font-size: 16px;
                        font-weight: bold;
                        color: #333333;
                        &::before {
                            content: "";
                            display: block;
                            position: absolute;
                            left: 0;
                            width: 4px;
                            height: 4px;
                            background: #ea4c89;
                            border-radius: 4px;
                        }
                    }
                }
            }
        }
        @keyframes design {
            0% {
                opacity: 0;
                background-position: right bottom 20px;
                background-size: 80px 33px;
            }
            8% {
                opacity: 1;
            }
            16% {
                opacity: 1;
            }
            24% {
                opacity: 0;
                background-position: right bottom 20px;
                background-size: 80px 33px;
                background-image: url("https://img.podpartner.com/static/images-20230202/header-section-design1.png");
            }
            25% {
                opacity: 0;
                background-position: 36px 35px;
                background-size: 86px 54px;
                background-image: url("https://img.podpartner.com/static/images-20230202/header-section-design2.png");
            }
            33% {
                opacity: 1;
            }
            41% {
                opacity: 1;
            }
            49% {
                opacity: 0;
                background-position: 36px 35px;
                background-size: 86px 54px;
                background-image: url("https://img.podpartner.com/static/images-20230202/header-section-design2.png");
            }
            50% {
                opacity: 0;
                background-position: left 44px top;
                background-size: 13px 25px;
                background-image: url("https://img.podpartner.com/static/images-20230202/header-section-design3.png");
            }
            58% {
                opacity: 1;
            }
            66% {
                opacity: 1;
            }
            74% {
                opacity: 0;
                background-position: left 44px top;
                background-size: 13px 25px;
                background-image: url("https://img.podpartner.com/static/images-20230202/header-section-design3.png");
            }
            75% {
                opacity: 0;
                background-position: left 3px top 43px;
                background-size: 24px 24px;
                background-image: url("https://img.podpartner.com/static/images-20230202/header-section-design4.png");
            }
            83% {
                opacity: 1;
            }
            91% {
                opacity: 1;
            }
            99% {
                opacity: 0;
                background-position: left 3px top 43px;
                background-size: 24px 24px;
                background-image: url("https://img.podpartner.com/static/images-20230202/header-section-design4.png");
            }
            100% {
                opacity: 0;
                background-position: right bottom 20px;
                background-size: 80px 33px;
                background-image: url("https://img.podpartner.com/static/images-20230202/header-section-design1.png");
            }
        }
        > figure {
            position: relative;
            width: 432px;
            height: 544px;
            img {
                width: 470px;
                height: 582px;
            }
            overflow: hidden;
            .header-section-design {
                box-sizing: border-box;
                position: absolute;
                top: 82px;
                left: 72px;
                width: 134px;
                height: 164px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                > figure {
                    position: relative;
                    overflow: hidden;
                    width: 172px;
                    height: 158px;
                    animation: design 16s linear infinite forwards;
                    background-image: url("https://img.podpartner.com/static/images-20230202/header-section-design1.png");
                    background-repeat: no-repeat;
                    background-position: right bottom 20px;
                    background-size: 80px 33px;
                }
            }
        }
    }
}
.home-btn {
    margin: 0;
    cursor: pointer;
    width: 198px;
    height: 52px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 44px;
    font-size: 16px;
    font-weight: 600;
    i {
        font-size: 12px;
        margin: 0 0 0 14px;
    }
}
.home {
    z-index: 0;
    font-family: Roboto;
    width: 100%;
    min-width: 1200px;
    min-height: 400px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #fff;
    section {
        box-sizing: border-box;
        width: 100%;
    }
}
.un-animation {
    & > .header-section {
        background: #fff;
    }
    & > .clothing-style {
        background: #fff;
        .quality-garments .quality-garments-content {
            .quality-garments-content-start img {
                transform: translateY(0);
            }
            .quality-garments-content-end {
                opacity: 1;
                img {
                    width: 428px;
                }
            }
        }

        .clothing-style-content-basics {
            > figure {
                right: 100px;
                img {
                    animation: none;
                    transform: translate(0, 0);
                    &:nth-child(1) {
                        transform: translate(200px, -180px);
                    }
                    &:nth-child(2) {
                        width: 312px;
                        height: 312px;
                        transform: translate(0, 0);
                    }
                    &:nth-child(3) {
                        transform: translate(-200px, 180px);
                    }
                }
            }
        }
        .clothing-style-content-trendy {
            > figure {
                transform: translateX(40px);
                img {
                    animation: none;
                    transform: translate(0, 0);
                    &:nth-child(1) {
                        transform: translate(-200px, -180px);
                    }
                    &:nth-child(2) {
                        width: 312px;
                        height: 312px;
                        transform: translate(0, 0);
                    }
                    &:nth-child(3) {
                        transform: translate(200px, 180px);
                    }
                }
            }
        }
    }
    & > .clothing-vision-empty {
        display: none;
    }
    & > .clothing-vision {
        padding-top: 0;
        z-index: 1 !important;
        background-color: #fff;
        position: relative;
        z-index: auto;
        display: flex;
        flex-direction: column;
        height: auto;
        z-index: -1;
        --transCount: 0 !important;
        * {
            position: relative;
            animation: none;
            opacity: 1;
        }
        h3 {
            position: relative;
            transform: scale(1);
            top: auto;
        }
        ul {
            pointer-events: none;
            animation-iteration-count: 0 !important;
            --li-before-opacity: 0 !important;
            --li-animation-h4: 0 !important;
            margin-top: 40px;
            pointer-events: all;
            --liAnimationCount: 0 !important;
            li {
                &::before {
                    opacity: 1;
                }
                & > figure {
                    width: 240px !important;
                    height: 240px !important;
                }
                & > cite {
                    display: none;
                }
                .clothing-vision-li-media {
                    display: none;
                }
                & > figure::before {
                    display: none;
                }
            }
        }
        .clothing-vision-design {
            height: auto;
            .clothing-vision-design-media {
                display: none;
            }
            dl {
                margin-top: 88px;
                height: auto;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                animation: none;
                transform: none;
                dt,
                dd {
                    position: relative;
                    padding-left: 300px;
                    width: 850px;
                    margin-bottom: 100px;
                    height: auto;
                }
                dt,
                dd {
                    &::before {
                        content: "";
                        display: block;
                        position: absolute;
                        width: 240px;
                        height: 240px;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        background-image: url("https://img.podpartner.com/static/images-202305/clothing-style-mask-h5-1.png");
                        background-size: 240px 240px;
                        background-repeat: no-repeat;
                    }
                }
                dd {
                    &:nth-child(2) {
                        &::before {
                            background-image: url("https://img.podpartner.com/static/images-202305/clothing-style-mask-h5-2.png");
                        }
                    }
                    &:nth-child(3) {
                        &::before {
                            background-image: url("https://img.podpartner.com/static/images-202305/clothing-style-mask-h5-3.png");
                        }
                    }
                }
            }
        }
    }
    & > .technology {
        padding: 80px 0;
        height: auto;
        min-height: auto;
        * {
            opacity: 1 !important;
        }
    }
    & > .sales-empty {
        display: none;
    }
    & > .sales {
        padding: 80px 0;
        background: #000;
        min-height: 800px;
        animation: none;
        transform: none;
        position: relative;
        z-index: auto;
        * {
            animation: none;
            transform: none;
        }
        dl dd {
            figure {
                img {
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    &:nth-child(1) {
                        animation: none;
                        width: 400px;
                        height: 400px;
                    }
                    &:nth-child(2) {
                        animation: none;
                        width: 474px;
                        height: 510px;
                    }
                }
            }
        }
    }
    .advantage {
        background: #fff;
    }
}
@media (max-width: 1200px) {
    .un-animation {
        min-width: auto;
        .header-section {
            .header-section-guide {
                min-width: auto;
                .header-section-guide-describe > hgroup {
                    & > h2 {
                        width: 600px;
                        font-size: 50px;
                    }
                    & > p {
                        width: 600px;
                    }
                }
            }
        }
        .clothing-style {
            .clothing-style-content {
                .quality-garments {
                    .quality-garments-content {
                        width: 880px;
                        height: 460px;
                        .quality-garments-content-start {
                            & > img {
                                height: 100%;
                                width: auto;
                                &:nth-child(2) {
                                    left: calc(50% - 142px);
                                }
                            }
                        }
                    }
                }
                .clothing-style-content-basics,
                .clothing-style-content-trendy {
                    margin: 20px 0 40px;
                }
            }
        }
        .clothing-vision {
            padding-top: 40px;
            & > ul {
                width: auto;
                li {
                    figure {
                        width: 200px !important;
                        height: 200px !important;
                    }
                    &::before {
                        width: 300px;
                        height: 300px;
                    }
                    h4 {
                        line-height: 16px;
                        font-size: 14px;
                        height: 64px;
                        justify-content: space-around;
                    }
                }
            }
        }
        .sales {
            & > dl {
                width: auto;
                dt {
                    width: auto;
                }
                dd {
                    width: auto;
                    figure {
                        img {
                            &:nth-child(2) {
                                width: 446px;
                                height: 480px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 960px) {
    .un-animation {
        min-width: auto;
        background-color: #fff !important;
        & > section {
            padding: 0 14px;
        }
        .header-section {
            padding: 32px 0 0 0;
            height: auto;
            margin-bottom: 60px;
            .header-section-guide {
                align-items: center;
                flex-direction: column;
                min-width: auto;
                .header-section-guide-describe {
                    width: 100%;
                    max-width: 520px;
                    margin: 0;
                    & > hgroup {
                        height: auto;
                        margin-bottom: 32px;
                        * {
                            position: static;
                        }
                        h2 {
                            width: auto;
                            font-size: 34px;
                            line-height: 42px;
                            margin-bottom: 12px;
                            br {
                                display: none;
                            }
                        }
                        p {
                            width: auto;
                        }
                    }
                    & > button {
                        font-size: 18px;
                        padding: 0 18px;
                        width: auto;
                        height: 42px;
                    }
                    & > ul {
                        font-family: Roboto-Bold, Roboto;
                        justify-content: flex-start;
                        padding-left: 2px;
                        margin-top: 32px;
                        li {
                            p {
                                font-size: 16px;
                                width: 100%;
                            }
                        }
                    }
                }
                .header-section
                    .header-section-guide
                    .header-section-guide-describe
                    ul
                    li
                    p {
                    padding: 0 0 0 10px;
                    font-size: 13px;
                    width: 130px;
                    &:nth-child(2) {
                        width: 201px;
                    }
                }
                figure {
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    width: 100%;
                    height: 252px;
                    img {
                        transform: translateX(36px);
                        width: 258px;
                        height: 298px;
                    }
                    .header-section-design {
                        top: 42px;
                        left: 214px;
                        width: 72px;
                        height: 82px;
                        > figure {
                            display: none;
                        }
                    }
                }
            }
        }
        .clothing-style {
            min-height: auto;
            .clothing-style-content {
                width: 100%;
                .quality-garments {
                    height: auto;
                    .quality-garments-content {
                        max-width: 500px;
                        position: static;
                        top: 0%;
                        left: 0%;
                        transform: translate(0%, 0%);
                        height: auto;
                        .quality-garments-content-start {
                            position: static;
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            img {
                                display: none;
                                width: 100%;
                                position: static;
                                &:nth-child(2) {
                                    display: block;
                                }
                            }
                        }
                        .quality-garments-content-end {
                            border-radius: 28px;
                            img {
                                width: 80%;
                                height: auto;
                                -webkit-animation: none;
                                animation: none;
                                min-height: 100px;
                            }
                        }
                    }
                }
                .clothing-style-content-basics,
                .clothing-style-content-trendy {
                    margin-top: 60px;
                    padding: 0 14px;
                    height: auto;
                    & > h3 {
                        font-size: 25px;
                        line-height: 32px;
                        text-align: left;
                        margin-bottom: 14px;
                        & > br {
                            display: none;
                        }
                    }
                    & > p {
                        text-align: left;
                        font-size: 19px;
                        font-weight: 400;
                        color: #000000;
                        line-height: 28px;
                        margin-bottom: 24px;
                        & > br {
                            display: none;
                        }
                    }
                    & > figure {
                        position: static;
                        width: 100%;
                        height: auto;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        transform: none;
                        img {
                            width: 32%;
                            max-width: 240px;
                            position: static;
                            height: auto;
                            transform: translate(0, 0);
                            -webkit-animation: none;
                            animation: none;
                        }
                    }
                }
            }
        }
        .clothing-vision {
            margin-top: 72px;
            h3 {
                height: auto;
                margin-bottom: 16px;
                transform: initial;
                span {
                    font-size: 24px;
                    color: #000000;
                    line-height: 28px;
                    transform: initial;
                    padding: 0;
                }
            }
            ul {
                margin: -4px 0;
                max-width: 644px;
                width: auto;
                justify-content: space-around;
                overflow: hidden;
                li {
                    border-radius: 50%;
                    margin: 4px 0;
                    width: 162px;
                    height: 162px;
                    animation: none;
                    pointer-events: all;
                    &::before {
                        width: 162px;
                        height: 162px;
                    }
                    figure {
                        animation: none;
                        width: 106px !important;
                        height: 106px !important;
                    }
                    h4 {
                        width: 126px;
                        height: 60px;
                        justify-content: flex-start;
                        span {
                            font-size: 10px;
                            word-spacing: -0.8px;
                            line-height: 14px;
                        }
                        .currency-rate {
                            display: none;
                        }
                    }
                    &:nth-child(1) h4 {
                        width: 82px;
                    }
                }
            }
            .clothing-vision-design {
                width: auto;
                min-width: auto;
                & > dl {
                    margin-top: 80px;
                    dt {
                        padding: 0 0 244px 0;
                        width: auto;
                        height: auto;
                        margin-bottom: 90px;

                        span {
                            transform: initial;
                        }
                        em {
                            font-size: 36px;
                            font-weight: bold;
                            line-height: 40px;
                            transform: initial;
                            padding: 0;
                        }
                        &::before {
                            width: 220px;
                            height: 220px;
                            left: 50%;
                            top: auto;
                            bottom: 0;
                            transform: translateX(-50%);
                            background-size: 220px 220px;
                        }
                    }
                    dd {
                        padding: 0 0 244px 0;
                        width: auto;
                        height: auto;
                        margin-bottom: 90px;
                        h3 {
                            text-align: center;
                            font-size: 36px;
                            line-height: 40px;
                        }
                        p {
                            font-size: 16px;
                            line-height: 22px;
                            text-align: center;
                            strong {
                                font-size: 16px;
                                font-weight: bold;
                                line-height: 22px;
                                transform: inherit;
                                em {
                                    padding-top: 0;
                                    padding-bottom: 0;
                                    font-size: inherit;
                                    line-height: inherit;
                                }
                            }
                        }
                        button {
                            margin: 18px auto 0;
                        }
                        &::before {
                            width: 220px;
                            height: 220px;
                            left: 50%;
                            bottom: 0;
                            top: auto;
                            transform: translateX(-50%);
                            background-size: 220px 220px;
                        }
                        &:last-child {
                            padding: 0 0 340px 0;
                            &::before {
                                background-image: url("https://img.podpartner.com/static/images-202305/clothing-style-mask-h5-3.png");
                                width: 320px;
                                height: 320px;
                                background-size: 320px 320px;
                            }
                        }
                    }
                }
            }
        }
        .technology {
            width: 100%;
            height: auto;
            dl {
                width: auto;
                height: auto;
                dt {
                    padding: 30px 0;
                    font-size: 29px;
                    font-weight: bold;
                    color: #ffffff;
                    line-height: 40px;
                    br {
                        display: none;
                    }
                }
                dd {
                    margin-top: 0;
                    flex-direction: column;
                    figure {
                        width: 100%;
                        max-width: 500px;
                        height: auto;
                        margin-bottom: 14px;
                    }
                    p {
                        width: auto;
                        max-width: 500px;
                        height: auto;
                        font-size: 15px;
                        font-weight: 400;
                        color: #ffffff;
                        line-height: 22px;
                        margin-bottom: 32px;
                    }
                }
            }
        }
        .sales {
            padding: 48px 14px 80px;
            height: auto;
            margin-top: -1px;
            dl {
                width: 100%;
                max-width: 500px;
                dt {
                    width: auto;
                    font-size: 30px;
                    line-height: 38px;
                    margin-bottom: 14px;
                    strong {
                        font-size: 30px;
                        line-height: 40px;
                    }
                    br {
                        display: none;
                    }
                }
                dd {
                    flex-direction: column;
                    width: auto;
                    p {
                        width: auto;
                        height: auto;
                        font-size: 16px;
                        line-height: 22px;
                        text-align: left;
                    }
                    figure {
                        margin-top: 30px;
                        width: 240px;
                        height: 258px;
                        img {
                            &:nth-child(1) {
                                width: 210px;
                                height: 210px;
                            }
                            &:nth-child(2) {
                                width: 240px;
                                height: 258px;
                            }
                        }
                    }
                }
            }
        }
        .advantage {
            padding: 48px 14px 40px;
            max-width: 558px;
            figure {
                display: none;
            }
            div {
                padding: 40px 0;
                width: auto;
                max-width: auto;
                min-width: auto;
                height: auto;
                border-radius: 22px;
                position: relative;
                .advantage-content-bg {
                    display: block;
                    position: absolute;
                    inset: 0;
                    width: 100%;
                    height: 100%;
                    p {
                        &:nth-child(1) {
                            width: 32px;
                            height: 32px;
                            background: #e7dba1;
                            opacity: 0.5;
                            border-radius: 50%;
                            position: absolute;
                            right: 90px;
                            top: -20px;
                        }
                        &:nth-child(2) {
                            width: 34px;
                            height: 34px;
                            background: #a1c9e7;
                            opacity: 0.5;
                            border-radius: 50%;
                            position: absolute;
                            right: 38px;
                            bottom: -18px;
                        }
                        &:nth-child(3) {
                            width: 20px;
                            height: 20px;
                            background: #e7a1ba;
                            opacity: 0.5;
                            border-radius: 50%;
                            position: absolute;
                            left: 50px;
                            bottom: -12px;
                        }
                    }
                }
                dl {
                    width: auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin: 0;
                    padding: 0 20px;
                    dd {
                        width: 186px;
                        margin: 0 0 14px 0;
                        font-size: 16px;
                    }
                    dt {
                        margin-top: 12px;
                        font-size: 24px;
                        line-height: 36px;
                    }
                }

                button {
                    display: none;
                }
            }
        }
    }
}
</style>
